<template>
  <div class="complaint__list__item" @click.stop="onItemClick">
    <div class="status" :class="status.className">{{ status.statusName }}</div>
    <div class="msg__item">
      <div class="title">运单号</div>
      <div class="description">{{ item.billNo }}</div>
    </div>
    <div class="msg__item">
      <div class="title">投诉对象</div>
      <div class="description">{{ item.name }}</div>
    </div>
    <div class="msg__item">
      <div class="title">手机号</div>
      <div class="description">{{ item.mobile }}</div>
    </div>
    <div class="msg__item">
      <div class="title">投诉时间</div>
      <div class="description">{{ item.createTime }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { ListItemType } from '../utils/types'
import { StatusEm } from '../utils/enums'
export default defineComponent({
  name: 'complaintListUtem',
  emits: ['onClick'],
  props: {
    item: {
      type: Object as PropType<ListItemType>,
      default: () => {
        return {}
      }
    }
  },
  components: {},
  setup(props, { emit }) {
    const status = computed(() => {
      const obj = {
        className: '',
        statusName: ''
      }
      switch (props.item.status) {
        case StatusEm.WAIT.value:
          obj.className = 'wait__status'
          obj.statusName = StatusEm.WAIT.description
          break
        case StatusEm.FINISHED.value:
          obj.className = 'finished__status'
          obj.statusName = StatusEm.FINISHED.description
          break
        case StatusEm.CANCEL.value:
          obj.className = 'cancel__status'
          obj.statusName = StatusEm.CANCEL.description
          break
      }
      return obj
    })

    // 点击事件
    const onItemClick = (): void => {
      emit('onClick', props.item)
    }

    return {
      status,
      onItemClick
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.complaint__list__item {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(93, 184, 255, 0.07);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 12px 10px 10px 10px;
  .msg__item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title,
    .description {
      font-size: 14px;
      font-weight: 400;
      color: #101736;
      line-height: 20px;
    }
  }
  .finished__status {
    background: url('../../../../../../../assets/image/mine/complaint/finished.png') left top no-repeat;
  }
  .cancel__status {
    background: url('../../../../../../../assets/image/mine/complaint/cancel.png') left top no-repeat;
  }
  .wait__status {
    background: url('../../../../../../../assets/image/mine/complaint/wait.png') left top no-repeat;
  }
  .status {
    width: 65px;
    height: 28px;
    background-size: 100%;
    margin: 0 0 10px -10px;
    text-indent: -5px;
    color: white;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
